<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input,div{
            margin: 20px auto;
        }
    </style>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="demo">
        <input type="text" v-model='firstName'><br>
        <input type="text" v-model='lastName'><br>
        <div>{{fullName}}</div>
        <button @click='click'>点击将全名变为Li-bai</button>
    </div>
    <script>
        Vue.config.productionTip = false;
        
        new Vue({
            el:'#demo',
            data:{
                firstName:'zhang',
                lastName:'san'
            },
            //底层借助 Object.defineProperty()方法实现,存在getter和setter
            //fullName 的值为其内部 get函数的返回值
            computed:{
                fullName:{
                    /**
                     * get函数何时调用
                     *      1.Vue初次解析模板时调用(前提是模板中要用到这个计算属性)
                     *      2.当该计算属性所依赖的数据发生变化时调用
                    */
                    get(){
                        let {firstName,lastName} = this;
                        return firstName[0].toUpperCase() + firstName.slice(1) + '-' + lastName
                    },
                    /**
                     * 优势:
                     *  1.结构模板应用简单
                     *  2.不同于methods函数调用,计算属性进行缓存机制,提高复用率,效率更高
                    */

                    set(val){
                        let arr = val.split('-');
                        //设置 fullName 所依赖的属性
                        this.firstName = arr[0].toLowerCase();
                        this.lastName = arr[1]
                    }
                    /**
                     * set函数何时设置:
                     *      当以后需要直接修改计算出的属性时设置
                    */
                }
            },
            methods:{
                //点击将全名改变,fullName属性被改变时,触发计算属性的 setter 改变fullName依赖的属性值
                click(){
                    this.fullName = 'Li-bai'
                }
            }
        })
    </script>
</body>

</html>